<template>
	<div id="helpProcess">
		<div id="header">
			<img src="../../static/img/return.png" @click="$router.go(-1)"/>
			<p>客服与帮助</p>
		</div>
		<div @click="helpNum == 1?helpNum = 0:helpNum = 1" class="help_2_title">
			<div class="item_left">
				<img src="../../static/img/help-05.png"/>
				<p>注册登录</p>
			</div>
			<img src="../../static/img/my-12.png"/>
		</div>
		<!-------轮播----------->
		<div v-show="helpNum == 1" class="help_2_list">
			<swiper :options="swiperOption">
				<swiper-slide v-for="item in imgList1">
					<img :src="item.imgPath"/>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<div @click="helpNum == 2?helpNum = 0:helpNum = 2" class="help_2_title">
			<div class="item_left">
				<img src="../../static/img/help-06.png"/>
				<p>申请</p>
			</div>
			<img src="../../static/img/my-12.png"/>
		</div>
		<!-------轮播----------->
		<div v-show="helpNum == 2" class="help_2_list">
			<swiper :options="swiperOption">
				<swiper-slide v-for="item in imgList2">
					<img :src="item.imgPath"/>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<div @click="helpNum == 3?helpNum = 0:helpNum = 3" class="help_2_title">
			<div class="item_left">
				<img src="../../static/img/help-07.png"/>
				<p>下单</p>
			</div>
			<img src="../../static/img/my-12.png"/>
		</div>
		<!-------轮播----------->
		<div v-show="helpNum == 3" class="help_2_list">
			<swiper :options="swiperOption">
				<swiper-slide v-for="item in imgList3">
					<img :src="item.imgPath"/>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<div @click="helpNum == 4?helpNum = 0:helpNum = 4" class="help_2_title">
			<div class="item_left">
				<img src="../../static/img/help-09.png"/>
				<p>提现</p>
			</div>
			<img src="../../static/img/my-12.png"/>
		</div>
		<!-------轮播----------->
		<div v-show="helpNum == 4" class="help_2_list">
			<swiper :options="swiperOption">
				<swiper-slide v-for="item in imgList4">
					<img :src="item.imgPath"/>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
	name: 'helpProcess',
	data:function(){
		return{
			helpNum: 0,
			//------轮播图片组----------
			imgList1: [
		  		{
		  			imgPath:'./static/img/help-1-1.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-1-2.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-1-3.jpg',
		  		},
		  	],
			imgList2: [
		  		{
		  			imgPath:'./static/img/help-2-1.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-2-2.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-2-3.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-2-4.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-2-5.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-2-6.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-2-7.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-2-8.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-2-9.jpg',
		  		},
		  	],
			imgList3: [
		  		{
		  			imgPath:'./static/img/help-3-1.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-3-2.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-3-3.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-3-4.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-3-5.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-3-6.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-3-7.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-3-8.jpg',
		  		},
		  	],
			imgList4: [
		  		{
		  			imgPath:'./static/img/help-4-1.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-4-2.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-4-3.jpg',
		  		},
		  		{
		  			imgPath:'./static/img/help-4-4.jpg',
		  		},
		  	],
			//---------轮播组件-----------
			swiperOption: {
				autoplay: 3000,  //l轮播间隔时间
				loop: false,　　//是否自动轮播
				pagination : {el:'.swiper-pagination'}, //轮播图中下标点显示
			},
		}
	},
	components: {
	   swiper,
	   swiperSlide
	},
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#helpProcess{
	padding-top: 4rem;
	min-height: 100%;
	box-sizing: border-box;
}
.help_2_title{
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 3.4rem;
	padding: 0 1rem;
	box-sizing: border-box;
	border-bottom: 1px solid #EEEEEE;
}
.help_2_title>img{
	height: 1.4rem;
}
.help_2_title .item_left{
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	color: #4F4F4F;
}
.help_2_title .item_left img{
	height: 2rem;
	display: block;
	margin-right: 1rem;
}
.help_2_title .item_left p{
	white-space: nowrap;
}
.help_2_list{
	width: 94%;
	margin: 0 auto;
}
.help_2_list .swiper-wrapper,.help_2_list .swiper-slide{
	width: 100%;
}
.help_2_list .swiper-slide img{
	width: 100%;
	display: block;
}
</style>